<!-- 弹窗组件 -->
<template>
  <div class="tanchuang_wrap" v-if="isShow">
     <div class="dialog_cover"  @click="closeMyself"></div>

     <transition name="drop">
     <div class="dialog_content" v-if="isShow">
         <div class="alert_title">
             <div class="alert_title_left">{{dialogname}}</div>
             <div class="alert_title_right" @click="closeMyself"></div>
         </div>
         
        <div class="alert_content">
              {{alert_text}}
        </div>

         <div class="down" > 
             <div v-if="showCancle" class="down_button_cancle" @click="closeMyself">取消</div>
             <div class="down_button" @click="besure">确定</div>
         </div>
     </div>
     </transition>
  </div>
</template>

<script>
export default {
data() {
  return {
    isShow: false,
    showCancle:false,
    dialogname:null,
    alert_text:'',
  }    
},
methods: {
  show(params){  //初始化参数
     let { showCancle,dialogname,alert_text } = params
     this.showCancle = showCancle
     this.dialogname = dialogname
     this.alert_text = alert_text

     this.isShow = true
  },
  closeMyself () {  //取消按钮
     this.isShow = false
     this.callBack(false)
  },
  besure(){  //确定按钮
     this.isShow = false
     this.callBack(true)
  },
  all_close(){//全局关闭
    this.isShow = false
  }
}
}
</script>

<style lang="scss" scoped>
.drop-enter-active, .drop-leave-active{
  transition: opacity .5s;
}
.drop-enter, .drop-leave-to{
  opacity:0;
}


.tanchuang_wrap{
  .dialog_cover {
    background: #000;
    opacity: 0.3 ;
    position: fixed;
    z-index: 35;
    top: 32px;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .dialog_content {
    width: 440px;
    position: fixed;
    overflow: auto;
    background: #fff;
    top: 35%;
    left: 50%;
    margin-left: -211px;
    z-index: 40;
    line-height: 1.6;
    border-radius:8px;
    .alert_title{
        background:white;
        width:100%;
        height:53px;
        overflow: hidden;
        border-bottom:1px solid #E1E6ED;
        .alert_title_left{
           float:left;
           margin-left: 20px;
           //margin-top: 15px;
           font-size:16px;
           color:#333;
           line-height: 53px;
           font-weight: bold;
        }
        .alert_title_right{
          float:right;
          width:12px;
          height: 12px;
          margin-top: 20px;
          margin-right: 20px;
          background-image: url('./关闭.png');
          background-repeat: no-repeat;
          background-size: 12px 12px;
          cursor: pointer;
        }
        .right:hover{
          color: #4fc08d;
        }
    }
    .alert_content{
      padding: 15px 20px;
      min-height: 130px;
      text-align:left;
      font-size:16px;color:#000;
      border-bottom:1px solid #E1E6ED;
    }
    .down{
      display: flex;
      height: 64px;
      flex-direction:row-reverse;
      .down_button{
         width: 72px;
         height: 32px;
         font-size: 13px;
         cursor: pointer;
         background:#2389ff;
         border-radius:16px;
         text-align: center;
         line-height: 32px;
         color: white;
         font-weight: 500;
         margin-top: 16px;

         margin-right:15px;
      }
      .down_button_cancle{     
         margin-right: 28px;
         width: 72px;
         height: 32px;
         font-size: 13px;
         cursor: pointer;
         background:#fff;
         border:1px solid black;
         border-radius:16px;
         text-align: center;
         line-height: 32px;
         color: black;
         font-weight: 500;
         margin-top: 16px;
      }
    }
  }
}
</style>
